<template>
	<view class="content">
		<view class="component-box">
			<!-- 选择 -->
			<view class="item" v-for="(item, index) in tabMenu" :key="index" @tap="activeTab(index)">
				<view class="item-title" :class="[tabSwitch == index ? 'active-item-title' : '']">{{item}}</view>
				<i class="iconfont iconjiantou icon-styl" :class="[tabSwitch == index ? 'active-icon-styl' : '']"></i>
			</view>
			
			<view class='pop-bg' v-if="con1Switch" @tap.stop="closeAll">
				<!-- 日期 -->
				<view class="bwpicke" style="background-color:white;border-top: 1px solid #D8D8D8;">
					<picker-view class="pickcss" v-if="visible" :indicator-class="picview" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
						<picker-view-column>
							<view class="item" style="border-right:0upx ;width: 140upx;" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column class="columcss">
							<view class="item" style="border-right:0upx;width: 140upx;" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="btnchak">
					<text class="qdbt" @click="qdchak()">确定</text>
				</view>
			</view>
			
			<!-- 支出 -->
			<view class='pop-bg' v-if="con2Switch" @tap.stop="closeAll">
				<view style="border-bottom: 1upx solid #D8D8D8;" class="bg-con1" v-for="(item, index) in arrBgCon2" :key="index" @tap="con2ChangeOpt(item, index)">
					<view class="opi-sty3" :class="[con2Current == index ? 'active-opi-sty3' : '']">{{item.title}}</view>
					<i class="iconfont gougou-styl" :class="[con2Current == index ? 'iconduigou' : '']"></i>
				</view>
			</view>
		</view>
		
		<view class="detailed">
			<view class="detailed-z">
				<view class="detailed-left">
					<text>2019年5月</text>
				</view>
				<view class="detailed-right">
					<view class="">支出￥20.0</view>
					<view class="">收入￥120.0</view>
				</view>	
			</view>	
		</view>
		
	    <view class="examine">
			<view class="examine-z">
				<view class="billname">数学
				<text class="money">-￥10.0</text>
				</view>
				<text class="times">今天 8:20:00</text>
			</view>
			<view class="examine-z">
				<view class="billname">九年级第一单元试题解析
				<text class="money">-￥20.0</text>
				</view>
				<text class="times">今天 8:20:00</text>
			</view>
			<view class="examine-z">
				<view class="billname">会员充值
				<text class="money">+￥120.0</text>
				</view>
				<text class="times">今天 8:20:00</text>
			</view>
			<view class="examine-z">
				<view class="billname">收款
				<text class="money">+￥10.0</text>
				</view>
				<text class="times">今天 8:20:00</text>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1

			for (let i = 1990; i <= date.getFullYear(); i++) {
			    years.push(i)
			}
			
			for (let i = 1; i <= 12; i++) {
			    months.push(i)
			}

			return {
				tabMenu: ['选择时间', '收支选择'],
				con1Switch: false,
				arrBgCon2: [{title: '全部'}, {title: '支出'}, {title: '收入'}],
				con2Current: 0,
				initTabTitleCon2: '',
				con2Switch:false,
				tabSwitch: 999,
				title: 'picker-view',
				years,
				year,
				months,
				month,
				value: [9999, month - 1],
				// /**
				//  * 解决动态设置indicator-style不生效的问题
				visible: true,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				picview:"pickes"
			}
		},
		methods: {
			bindChange (e) {
			    const val = e.detail.value
			    this.year = this.years[val[0]]
			    this.month = this.months[val[1]]
			},
			
			con2ChangeOpt(item, index) {
				this.con2Current = index
			},
			
			activeTab(index) {
				if(this.tabSwitch == 999) {
					this.tabSwitch = index
					if (index == 0) { this.con1Switch = true }
					if (index == 1) { this.con2Switch = true }
					return
				}
				this.closeAll()
			},
			qdchak(){
				this.con1Switch=false
				this.tabSwitch = 999
				this.con2Switch=false
			},
			closeAll() {
				this.con1Switch = false
				this.con2Switch = false
				this.tabSwitch = 999
			}
		}
	}
</script>

<style>
	page{
		background: #F7F7F7;
	}
	.pickes{
		/* background: #000000; */
		border-bottom: 0 !important;
		border-top: 0 !important;
	}
	.component-box {
		display: flex;
		align-items: center;
		width: 750upx;
		height: 93upx;
		border-bottom: 1px solid #E5E5E5;
		background: #FFFFFF;
	}
	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 38upx;
		border-right: 1px solid #E5E5E5;
	}
	.item-title {
		color: #333333;
		font-size: 36upx;
		transition: all .3s;
	}
	.active-item-title {
		color: #FF9900;
	}
	.item:last-child{
		border: none;
	}
	.icon-styl {
		font-size: 48upx;
		color: #0D0408;
		transform: rotate(90deg);
		transition: all .3s;
	}
	.active-icon-styl {
		color: #FF9900;
		transform: rotate(-90deg);
	}
	
	.pop-bg {
		position: absolute;
		width: 100%;
		height: calc(100% - 93upx);
		top: 93upx;
		background-color: rgba(0, 0, 0, 0.3);
		transition: opacity 5s;
	}
	.bg-con1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100upx;
		padding-left: 30upx;
		padding-right: 30upx;
		background-color: #ffffff;
		text-align: center;
	}
	.btnchak{
		width: 100%;
		height: 100upx;
		text-align: center;
		background-color: white;
		border-top: 1px solid #D8D8D8;
	}
	.qdbt{
		width: 100%;
		font-size: 34upx;
		line-height: 105upx;
		color: #FF9900;
	}
	.bg-con1:first-child {
		border-top: 1px solid #E5E5E5;
	}
	.opi-sty3 {
		color: #0D0408;
		font-size: 32upx;
		text-align: center;
	}
	.active-opi-sty3 {
		color:#FF9900;
	}
	
	.gougou-styl {
		color: #FF9900;
		font-size: 45upx;
	}
	
	.detailed{
		height: 130upx;
	}
	.detailed-z{
		height: 130upx;
		padding:0 30upx;
		
		width:100%;
		margin: auto;
	}
	.detailed-left{
		height: 130upx;
		line-height: 130upx;
		font-size: 36upx;
		color: #999999;
	}
    .detailed-right{
		margin-top: -110upx;
		padding-right: 55upx;
		float: right;
		height: 80upx;
		font-size: 28upx;
		text-align: right;
		color: #999999;
	}	
	.examine{
		height: 520upx;
		border-bottom: #999999;
		background: #FFFFFF;
	}
	.examine-z{
		width: 720upx;
		height: 130upx;
		margin: auto;
		border-bottom: #999999;
		border-bottom: 1px solid #E5E5E5;
	}
	.examine-z:last-child{
		border: none;
	}
	.billname{
		height: 65upx;
		line-height: 80upx;
		font-size: 34upx;
		color: #333333;
		margin-bottom: 10upx;
	}
	.money{
		float: right;
		font-size: 32upx;
		color: #666666;
	}
	.times{
		color: #999999;
		font-size: 28upx;
	}
	.pickcss{
		width: 300upx;
		height: 300upx;
		background-color: white;
		margin: auto;
		/* padding: 10upx 0upx; */
	}
	.pickes:before{
		border-top: 1px solid #FF9900 !important;
		width: 110upx;
		margin: auto;
		padding-right:10upx;
		
	}
	.pickes:after{
		border-bottom: 1px solid #FF9900 !important;
		width: 110upx;
		margin: auto;
		padding-right:10upx;

	}
	
</style>
